<template>
  <div class="materielAttribute">
    <div
      v-for="(item, index) of materielProperty"
      :key="item.attributeType"
      class="materielContent"
    >
      <div class="dialog-span">{{ item.attributeName }}</div>
      <el-autocomplete
        ref="custom"
        v-model.trim="item.name"
        highlight-first-item
        popper-class="my-autocomplete"
        :fetch-suggestions="querySearch"
        size="mini"
        class="input-width"
        :disabled="detailDisabled"
        @focus="propery(item.attributeType, index)"
        @select="selectRow"
      >
        <i
          slot="suffix"
          class="el-input__icon el-icon-search"
          @click="cliPropery(item.attributeType, index)"
        />
        <template slot-scope="{ item }">
          <div class="name">{{ item.fname }}</div>
        </template>
      </el-autocomplete>
    </div>
    <el-dialog
      v-dialogDrag
      :title="$t('market.ferpclsList')"
      model
      :visible.sync="isPropertylDialog"
      :close-on-click-modal="false"
      top="5vh"
      width="500px"
    >
      <div class="header">
        <span>{{ $t('shop.name1') }}:</span>
        <el-input
          v-model="fname"
          size="mini"
          style="width: 8vw;"
          @keyup.enter.native="propery"
        />
        <el-button type="primary" size="mini" @click="propery">{{ $t('btn.search') }}</el-button>
        <el-button type="primary" size="mini" @click="newlyPro">{{ $t('btn.add') }}</el-button>
      </div>
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        table-height="53vh"
        serial
        @clickRow="selectRow"
      >
        <template v-slot:btnSlot="col">
          <el-button type="warning" size="mini" @click="editPro(col.scope.row)">
            {{ $t('btn.edit') }}<!--修改-->
          </el-button>
        </template>
      </jc-table>
      <jc-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="propery"
      />
    </el-dialog>
    <el-dialog
      v-dialogDrag
      :title="title"
      model
      top="5vh"
      :visible.sync="isnewlyDialog"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-form ref="userForm" :model="userForm" label-width="120px" size="mini">
        <el-form-item :label="$t('market.pclsname')">
          <el-input v-model.trim="userForm.fname" />
        </el-form-item>
        <el-form-item style="height: 50px;">
          <el-button @click="isnewlyDialog = false">{{ $t('btn.cancel') }}</el-button>
          <el-button type="primary" @click="newUsers">{{ $t('btn.confirm') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryTitle,
  queryAttributeList,
  insertAttributeDetails,
  updateAttributeDetails
} from '@/api/basicManagement/createMateriel'

export default {
  name: 'Index',
  props: {
    detailDisabled: {
      type: Boolean,
      default: false
    },
    code: {
      type: Object,
      default: () => {
        return {}
      }
    },
    fnumber: {
      type: String,
      default: ''
    },
    fid: {
      type: [String, Number, Array],
      default: '' || 0
    },
    fattstatus: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      title: '',
      isnewlyDialog: false,
      userForm: {
        fname: ''
      },
      isPropertylDialog: false,
      materielProperty: [],
      tableData: [],
      tableHeader: [
        { label: this.$t('shop.name1'), prop: 'fname' },
        { label: this.$t('shop.state'), prop: 'fstatus' },
        { label: this.$t('market.handle'), type: 'btn' }
      ],
      attribute: '',
      indexSelf: 0,
      fname: '',
      pageSize: 200,
      pageNum: 1,
      total: 0
    }
  },
  watch: {
    fid() {
      if (this.fattstatus) {
        this.materialSelection()
      }
    }
  },
  created() {
    this.materialSelection()
  },
  methods: {
    cliPropery(ev, index) {
      this.isPropertylDialog = true
      this.indexSelf = index
      this.propery(ev)
    },
    // 物料属性列表
    propery(ev, index) {
      if (index || index === 0) {
        this.indexSelf = index
      }
      ev > 0 ? (this.attribute = ev) : ''
      const DATA = {
        fname: this.fname,
        attributeType: this.attribute,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      queryAttributeList(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.array
          this.total = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      })
    },
    // 获取
    selectRow(ev) {
      const item = this.materielProperty[this.indexSelf]
      item.name = ev.fname
      item.value = ev.fid
      this.isPropertylDialog = false
      this.$emit('perty', this.materielProperty)
    },
    // 物料属性
    async materialSelection() {
      // if (!this.fnumber || !this.fid) return
      const { data: RES, code, message } = await queryTitle({
        fnumberid: this.fid,
        fnumber: this.fnumber
      })
      if (code !== 0) {
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
        return
      }
      this.materielProperty = RES
      this.$emit('copyMaterielValue', this.materielProperty)
    },
    // 新增物料属性
    newlyPro() {
      this.userForm.fname = ''
      this.userForm.fid = ''
      this.isnewlyDialog = true
      this.title = this.$t('market.ferpclsAdd')
    },
    // 修改物料属性
    editPro(ev) {
      this.userForm.fname = ev.fname
      this.userForm.attributeType = ev.attributeType
      this.userForm.fid = ev.fid
      this.isnewlyDialog = true
      this.title = this.$t('market.ferpclsEdit')
    },
    newUsers() {
      const DATA = {
        attributeType: this.userForm.attributeType ? '' : this.attribute,
        ...this.userForm
      }
      const api = this.userForm.fid
        ? updateAttributeDetails
        : insertAttributeDetails
      api(DATA).then(res => {
        if (res.code === 0) {
          this.propery()
          this.isnewlyDialog = false
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      })
    },
    querySearch(queryString, cb) {
      const restaurants = this.tableData
      const results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.fname.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    }
  }
}
</script>

<style scoped lang="scss">
.materielAttribute {
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  .materielContent {
    width: 20%;
    display: flex;
    align-items: center;
  }
  .dialog-span {
    text-align: right;
    width: 120px;
    font-size: 14px;
    margin-right: 5px;
  }
}
.header {
  margin-bottom: 5px;
  .el-button {
    margin-left: 10px;
  }
}
.input-width {
  width: 185px;
  margin: 5px 0;
}
.el-icon-search {
  cursor: pointer;
}
</style>
